<template>
    <div class="role-expand-container">
        <div class="role-expand-card" v-for="(item, i) in imgList">
            <div class="role-expand-wrapper">
                <img class="role-expand-cover" :src=item.cover>
            </div>
            <img class="role-expand-character" :src=item.character>
        </div>
    </div>
</template>

<script>

export default {
    name: "RoleExpand",
    data() {
        return {
            imgList: [
                {
                    cover: "/img/style/eva_dzs599.jpg",
                    character: "/img/style/eva_dzs34.png",
                },
                {
                    cover: "/img/style/eva_mrxas234.jpg",
                    character: "/img/style/eva_mrx345.png",
                },
            ]

        }
    },
}
</script>

<style scoped>
.role-expand-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.role-expand-card {
    width: 270px;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0;
    perspective: 2500px;
    transition: all 0.4s;
    margin: 0 100px;
}

.role-expand-wrapper {
    transition: all 0.3s;
    position: absolute;
    width: 100%;
}

.role-expand-wrapper::before,
.role-expand-wrapper::after {
    content: '';
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.3s;
    position: absolute;
    left: 0;
}

.role-expand-wrapper::before {
    top: 0;
    height: 100%;
    background-image: linear-gradient(to top,
            transparent 46%,
            rgba(12, 13, 19, 0.5) 68%,
            rgba(12, 13, 19) 97%);
}

.role-expand-wrapper::after {
    bottom: 0;
    opacity: 1;
    background-image: linear-gradient(to bottom,
            transparent 46%,
            rgba(12, 13, 19, 0.5) 68%,
            rgba(12, 13, 19) 97%);
}

.role-expand-card:hover>.role-expand-wrapper {
    transform: perspective(900px) translateY(-5%) rotateX(25deg);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.role-expand-card:hover>.role-expand-wrapper::before,
.role-expand-card:hover>.role-expand-wrapper::after {
    opacity: 1;
}

.role-expand-card:hover>.role-expand-wrapper::after {
    height: 120px;
}

.role-expand-cover {
    width: 270px;
    height: 500px;
}

.role-expand-character {
    width: 100%;
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
}

.role-expand-card:hover .role-expand-character {
    opacity: 1;
    transform: translate3d(0%, -20%, 100px);
}

.role-expand-card:hover {
    transform: translateY(40px);
}
</style>
